<template>
	<view class="" style="background-color: #f2f1f1; padding-bottom: 20rpx;">
		<u-modal v-model="stargeShow" content="是否退出登录" @confirm="stroageConfirm" show-cancel-button></u-modal>
		<u-toast ref="uToast" />
		<view class="pad_bot">
			<view class="top_box">
				<view class="top" :style="{'height':phoneHeight+45+'px','position':'relative',}">
					<text class="top_tit"> 我的 </text>
				</view>
				<view class="user_info box box-align-center" style="padding: 0 20px">
					<image :src="isLogin ? userInfo.avatar : 'https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/img/miniMan.png'" mode="" style="height: 120rpx; width: 120rpx;border-radius: 50%;" @click="goToPersonCenter">
					</image>
					<view class="info_txt" v-if="isLogin">
						<view class="parent">{{userInfo.nickname }}</view>
						<view class="shop" v-if="userInfo.sn_num">已绑定{{ userInfo.sn_num }}台学生终端</view>
						<view class="shop" v-else>暂未绑定设备</view>
					</view>
					<view class="info_txt" v-else @tap="goLogin">
						<view class="parent">点击登录</view>
						<view class="shop">登录体验更多功能</view>
					</view>
				</view>
			</view>

			<view class="snSwiper" v-show="isLogin">
				<view style="background-color: #ffffff; border-radius: 36rpx;">
					<view style="padding-left: 20rpx; padding-top: 10rpx; font-size: 30rpx;">我的宝贝(学习平板)</view>
				</view>
				<infoSwiper :list="snList" :autoplay="false" :circular="false" :effect3d="true" effect3d-previous-margin="240" height="320" name="avatar" :current="currentInedex" @change="swiperChange" @click="clickSwiper" bgColor="#fff"></infoSwiper>
			</view>
		</view>

		<view class="info_texts">
			<view style="padding-bottom: 10rpx;font-size: 30rpx;">账号设置</view>
			<view class="box box-pack-between box-align-center " style="margin-top: 40rpx;" @click="getMore">
				<view class="box box-align-center">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/familyMembers.png" mode=""></image>
					<view style="margin-left: 30rpx">家庭成员</view>
				</view>
				<view class="farter box box-align-center">
					<u-icon name="arrow-right" color="#8d8c8c" size="24" style="margin-left: 10rpx"></u-icon>
				</view>
			</view>

			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx;" @click="getMore">
				<view class="box box-align-center">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/onlineMail.png" mode=""></image>
					<view style="margin-left: 30rpx">线上商城</view>
				</view>
				<view class="farter box box-align-center">
					<u-icon name="arrow-right" color="#8d8c8c" size="24" style="margin-left: 10rpx"></u-icon>
				</view>
			</view>

			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx;" @click="goToSaleMini">
				<view class="box box-align-center">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/afterSaleMini.png" mode=""></image>
					<view style="margin-left: 30rpx">售后送修小程序</view>
				</view>
				<view class="farter box box-align-center">
					<u-icon name="arrow-right" color="#8d8c8c" size="24" style="margin-left: 10rpx"></u-icon>
				</view>
			</view>

			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx;" @click="getMore">
				<view class="box box-align-center">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/customer.png" mode=""></image>
					<view style="margin-left: 30rpx">客服中心</view>
				</view>
				<view class="farter box box-align-center">
					<u-icon name="arrow-right" color="#8d8c8c" size="24" style="margin-left: 10rpx"></u-icon>
				</view>
			</view>

			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx;" @click="goToPersonCenter">
				<view class="box box-align-center">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/leftIcon/personCenter.png" mode=""></image>
					<view style="margin-left: 30rpx">个人中心</view>
				</view>
				<view class="farter box box-align-center">
					<u-icon name="arrow-right" color="#8d8c8c" size="24" style="margin-left: 10rpx"></u-icon>
				</view>
			</view>

			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx" @click="gotoPassword">
				<view class="box box-align-center">
					<text class="iconfont icon-mima my_icon" style="color: #ff840a;"></text>
					<view style="margin-left: 30rpx">密码管理</view>
				</view>
				<view class="farter box box-align-center">
					<text v-show="info.mobile">{{info.password ? '******' : '未设置'}}</text>
					<u-icon name="arrow-right" color="#8d8c8c" size="24" style="margin-left: 10rpx"></u-icon>
				</view>
			</view>

			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx;" >
				<view class="box box-align-center">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/accountManage.png" mode=""></image>
					<view style="margin-left: 30rpx">账号管理</view>
				</view>
				<view class="farter box box-align-center" v-if="isLogin" @click="clearstorage">
					<view class="box_radius">
						注销登录
					</view>
				</view>
				<view class="farter box box-align-center" v-else @tap="goLogin">
					<view class="box_radius">
						登录
					</view>
				</view>
			</view>
		</view>

		<view class="info_texts" v-if="false">
			<view class="box box-pack-between box-align-center" @click="gotoTablet">
				<view class="box box-align-center">
					<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/add.png" mode="">
					</image>
					<view style="margin-left: 10rpx">添加</view>
				</view>
				<view class="farter box box-align-center">
					<u-icon name="arrow-right" color="#8d8c8c" size="24" style="margin-left: 10rpx"></u-icon>
				</view>
			</view>
			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx" @click="gotoPhone">
				<view class="box box-align-center">
					<text class="iconfont icon-shouji my_icon" style="color: #9b41fc;"></text>
					<view style="margin-left: 10rpx">手机号码</view>
				</view>
				<view class="farter box box-align-center">
					<text v-show="info.mobile">{{ info.mobile }}</text>
					<u-icon name="arrow-right" color="#8d8c8c" size="24" style="margin-left: 10rpx"></u-icon>
				</view>
			</view>
			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx" @click="gotoPassword">
				<view class="box box-align-center">
					<text class="iconfont icon-mima my_icon" style="color: #ff840a;"></text>
					<view style="margin-left: 10rpx">密码管理</view>
				</view>
				<view class="farter box box-align-center">
					<text v-show="info.mobile">{{info.password ? '******' : '未设置'}}</text>
					<u-icon name="arrow-right" color="#8d8c8c" size="24" style="margin-left: 10rpx"></u-icon>
				</view>
			</view>
			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx">
				<view class="box box-align-center">
					<text class="iconfont icon-banben my_icon" style="color: #007EFF;"></text>
					<view style="margin-left: 10rpx">版本号</view>
				</view>
				<view class="farter box box-align-center">
					<text>1.1.1</text>
				</view>
			</view>

			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx" @click="goToPersonCenter">
				<view class="box box-align-center">
					<text class="iconfont icon-banben my_icon" style="color: #007EFF;"></text>
					<view style="margin-left: 10rpx">个人中心</view>
				</view>
				<view class="farter box box-align-center">
					<text>1.1.1</text>
				</view>
			</view>

			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx" v-if="loginShow" @click="goLogin">
				<view class="box box-align-center">
					<text class="iconfont icon-zhanghao my_icon" style="color: #fb5784;"></text>
					<view style="margin-left: 10rpx">账号管理</view>
				</view>
				<view class="farter box box-align-center">
					<view class="box_radius">登录</view>
				</view>
			</view>
			<view class="box box-pack-between box-align-center" style="margin-top: 40rpx" v-else @click="stargeShow=true">
				<view class="box box-align-center">
					<text class="iconfont icon-zhanghao my_icon" style="color: #fb5784;"></text>
					<view style="margin-left: 10rpx">账号管理</view>
				</view>
				<view class="farter box box-align-center">
					<view class="box_radius">
						退出登录
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfo,
		editPersonalInfo
	} from "@/api/my.js";
	import infoSwiper from "./swiper.vue";
	import {
		mapGetters,
		mapActions,
		mapMutations,
	} from "vuex";
	import index from "../../uview-ui";

	export default {
		components: {
			infoSwiper,
		},
		data() {
			return {
				stargeShow: false,
				loginShow: false,
				snList: [],
				currentInedex: 0,
				phoneHeight: '',
				userInfo: {}
			};
		},
		onLoad() {
			this.getPhoneHeight()

		},
		onShow() {
			this.getUserInfos()
		},
		
		methods: {
			...mapMutations(['SETSNINFO', 'SETBIND', 'LOGOUT']),
			getUserProfile(e) {
				uni.getUserProfile({
					desc: '用于完善资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						this.userInfo.avatar = res.userInfo.avatarUrl
						editPersonalInfo({
							avatar: res.userInfo.avatarUrl,
							nickname: res.userInfo.nickName
						}).then(res => {
							console.log('修改成功')
						})
					}
				})
			},
			getPhoneHeight() { //获取高度
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						that.phoneHeight = res.statusBarHeight
					},
				});
			},
			//跳转我的设备
			async gotoEquipment() {
				uni.navigateTo({
					url: "./../myEquipment/index",
				});
			},
			//跳转修改密码
			async gotoPassword() {
				uni.navigateTo({
					url: "/pages_subpackage/my/changePassword/index",
				});
			},
			//跳转修改手机号码
			async gotoPhone() {
				uni.navigateTo({
					url: "/pages_subpackage/my/changePhone/index?mobile=" + this.info.mobile,
				});
			},
			//跳转登录
			goLogin() {
				uni.navigateTo({
					url: "/pages/login/index",
				})
			},
			//清除缓存
			async clearstorage() {
				this.stargeShow = true;
			},
			stroageConfirm() {
				this.$store.commit('LOGOUT')
				this.snList = []
				this.$toast({
					title: '退出成功'
				})
			},
			getUserInfos() {
				getUserInfo().then((res) => {
					this.userInfo = res.data
					this.snList = res.data.sn
					let isBind = res.data.sn.length > 1 ? true : false
					this.SETBIND(isBind)
				}).catch((error) => {
					console.log("error", error)
					if (error.code = 10200) {
						this.LOGOUT()
					}
				})
			},
			//swiper的Click事件
			async clickSwiper(index, item) {
				if (item.sn_id == -1) {
					//跳转绑定页面
					uni.navigateTo({
						url: "/pages_subpackage/addTablet/index"
					});
				} else {
					//跳转设备信息
					uni.navigateTo({
						url: "/pages_subpackage/myEquipment/equipmentInof/index?snid=" + item.sn_id,
					});
				}
			},
			gotoTablet() {
				uni.navigateTo({
					url: "/pages_subpackage/addTablet/index",
				});
			},
			goToPersonCenter() {
				uni.navigateTo({
					url: "/pages_subpackage/personCenter/index?info=" + encodeURIComponent(JSON.stringify(this
						.userInfo)),
				});
			},
			//swiper的change事件
			swiperChange(index) {
				this.currentInedex = index;
				if (index > 1) {
					this.SETSNINFO(this.snList[index])
				}
			},
			//展开更多
			getMore() {
				this.$refs.uToast.show({
					title: '暂未开发！'
				})
			},
			goToSaleMini() {
				wx.navigateToMiniProgram({
					appId: 'wx790b636e2f245401',
					path: 'pages/index/index',
					//develop开发版；trial体验版；release正式版
					envVersion: 'release',
					success(res) {
						// 打开成功
						console.log("跳转小程序成功！", res);
					}
				})
			}
		},
		computed: {
			...mapGetters(['isLogin', 'snInfo'])
		},
		watch: {
			snList(newSnlist, onSnlist) {
				if (this.snInfo.value === '') {
					if (newSnlist.length >= 2) {
						this.SETSNINFO(newSnlist[1])
						this.currentInedex = 1
					}
				} else {
					let nowIndx = 0
					newSnlist.forEach((item, index) => {
						if (item.value == this.snInfo.value) {
							nowIndx = index
						}
					});
					this.currentInedex = nowIndx
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.top_box {
		// background-positio0%;
		background-image: url('https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/beijing.png');
		background-repeat: no-repeat;
		background-size: 100%;
		color: #ffffff;
		padding-bottom: 60rpx;
	}

	.top {
		position: fixed;
		top: 0;

		.top_tit {
			position: absolute;
			bottom: 10px;
			font-size: 34rpx;
			font-weight: bold;
			margin-left: 40rpx;
		}
	}

	.my_icon {
		font-size: 40rpx;
	}

	.info_portrait {
		background-color: #ffffff;
		padding: 40rpx 20rpx;

		image {
			height: 100%;
			width: 100%;
		}

		.info_img {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.name {
		font-size: 28rpx;
	}

	.info_text {
		font-size: 32rpx;
	}

	.user_info {

		// background-color: #ffffff;
		// margin: 20rpx 0;
		.inro {
			line-height: 80rpx;
			padding: 10rpx 20rpx;
		}
	}

	.logout {
		margin: 80rpx 0 0 0;
		background-color: #4880ff;
		color: #ffffff;
		border-radius: $uni-border-radius-lg;
		text-align: center;
		line-height: 80rpx;
	}

	.info_txt {
		margin-left: 40rpx;
		.parent {
			font-size: 36rpx;
			font-weight: 600;
			letter-spacing: 4rpx;
		}

		.shop {
			margin-top: 4rpx;
		}
	}

	.snSwiper {
		border-radius: 36rpx;
		margin: 20rpx;
		position: relative;
		height: 380rpx;
		background-color: #ffffff;
	}

	.myBaby {
		position: absolute;
		top: 300rpx;
		left: 46rpx;
		z-index: 999;
	}

	.info_texts {
		padding: 20rpx 40rpx 40rpx 20rpx;
		border-radius: 36rpx;
		background-color: #fff;
		margin: 0rpx 20rpx 10rpx 20rpx;

		image {
			height: 21px;
			width: 20px;
		}

		.farter {
			font-size: 28rpx;
			color: #8d8c8c;
		}
	}
</style>